<template>
    <h4>{{person}}</h4>
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <h2>薪资：{{job.j1.salary}}K</h2>
    <button @click="name+='~'">修改姓名</button>
    <button @click="age++">增长年龄</button>
    <button @click="job.j1.salary++">涨薪</button> 
  </template>
  
  <script>
    import {reactive, toRef, toRefs} from 'vue'
    export default {
      name: 'Demo',
      setup(){
        // 数据
        let person = reactive({
            name:'张三',
            age:18,
            job:{
                j1:{
                    salary:30
                }
            }
        })

        // const name1 = person.name
        // console.log('=========',name1)

        // const name2 = toRef(person,'name')
        // console.log('######',name2)

        const x = toRefs(person)
        console.log('********',x)

        // 返回一个对象（常用）
        return {
            person,

            // 错误写法，响应式丢失  这样就相当于 name:'张三',age:18,salary:20 只是重新定义了一个不是响应式的死数据
            /* name: person.name,
            age: person.age,
            salary: person.job.j1.salary */

            // 正确写法，使用 toRef，toRef指向另一个对象中的某个属性（引用）
            // PS：不能直接使用ref，这样是再新建一个ref对象，修改等操作时操作的就不是原来的person数据了，源数据并不会改变
            /* name:toRef(person,'name'),
            age:toRef(person,'age'),
            salary:toRef(person.job.j1,'salary') */

            // toRefs 只是把第一层的东西拆出来形成一个对象
            ...toRefs(person)
        }
      }
    }
  </script>
  
  